import { Form, Input, Modal, type FormProps, Row, Col, Cascader, type CascaderProps, Select, Radio, message } from "antd";
import { useEffect, useState } from "react";
// import type { UserAddParams, UserInfoTypeList, UserList, buildingTypeList, housesTypeList } from "../../type/userinfo";
import UploadImg from "../upload/UploadImg";
import { getBuilding, getType, staffsAdd } from "../../apis/staffs/stafss";


function staffs({ editUserInfo, onCancel ,getStaffs}: any) {
    // 设置修改头像
    const uploadHandle = (url: string) => {
        form.setFieldValue("photo", url);
    }
    const onFinish = async (values: any) => {
        let data = { ...editUserInfo, ...values ,type:usertypes.type};
        let res = await staffsAdd(data)
        if (res.errCode === 10000) {
            message.success("添加成功");
            getStaffs()
            onCancel();
        } else {
            message.error("添加失败");
        }
    }
    const onChangeTwo = (value: any[]) => {
        console.log(value[0]);
        usertypes.type=value[0]
        // setUsertypes
        // console.log(value);
    }
    const [form] = Form.useForm();
    useEffect(() => {
        getUserType()
        getHouse()
        form.setFieldsValue(editUserInfo)
    }, [])
    const getUserType = async () => {
        let res = await getType()
        setUsertypes(res.data.list)
    }
    const getHouse = async () => {
        let res = await getBuilding()
        setHouse(res.data.list)
    }
    const [usertypes, setUsertypes] = useState<any>()
    const [house, setHouse] = useState<any[]>()
    const { SHOW_CHILD } = Cascader;
    return (
        <Modal
            width={700}
            title={editUserInfo?.id ? '编辑居民' : '添加居民'}
            closable={{ 'aria-label': 'Custom Close Button' }}
            open={true}
            onOk={() => { form.submit() }}
            onCancel={() => { onCancel() }}
        >
            <Form onFinish={onFinish} form={form} size="large" style={{ padding: '10px 50px' }}>
                <Row gutter={100}>
                    <Col span={12}>
                        <Form.Item<any> name="photo" label="头像">
                            <UploadImg defaultImgUrl={editUserInfo?.photo} uploadHandle={uploadHandle} />
                        </Form.Item>

                        <Form.Item<any>
                            label="姓名" name="name" rules={[{ required: true, message: '请输入姓名!' }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item<any> name="buildingid" label="楼栋" rules={[{ required: true, message: '请选择楼栋' }]}>
                            <Cascader
                                style={{ width: '100%' }}
                                options={house}

                                multiple
                                maxTagCount="responsive"
                                showCheckedStrategy={SHOW_CHILD}
                                fieldNames={{ label: 'name', value: 'id', children: 'children' }}
                            />
                        </Form.Item>
                        <Form.Item<any> name="type" label="职员类型" rules={[{ required: true, message: '请选择类型' }]}>
                            <Cascader allowClear fieldNames={{ label: 'name', value: 'id' }} onChange={onChangeTwo} options={usertypes} placeholder="选择小区" />
                        </Form.Item>
                        <Form.Item<any>
                            label="性别" name="sex">
                            <Radio.Group
                                options={[
                                    { value: 1, label: '男' },
                                    { value: 0, label: '女' }
                                ]}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item<any>
                            label="身份证号" name="cardid">
                            <Input />
                        </Form.Item>
                        <Form.Item<any>
                            label="联系电话" name="mobile">
                            <Input />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </Modal>
    )
}
export default staffs